import React from 'react';
import {ModalForm, ProFormText, ProFormSelect, ProFormDigit, ProFormRadio} from '@ant-design/pro-components';
import {Button, Col, Row} from "antd";
import {DiffOutlined, EditOutlined} from "@ant-design/icons";
import {API} from "@/services/typings";

interface IDictData {
  isAdd: boolean;
  dictData?: API.IDictData;
  triggerButton?: React.ReactElement;
  onSubmit: (values: API.IDictData) => Promise<boolean>;
}


const DictDataEdit: React.FC<IDictData> = ({isAdd, dictData, triggerButton, onSubmit}) => {
  return (
    <ModalForm
      title={isAdd ? '新增数据' : '编辑数据'}
      onFinish={async (values: API.IDictData) => {
        await onSubmit?.(values);
        return true;
      }}
      autoFocusFirstInput
      initialValues={dictData}
      trigger={triggerButton ? triggerButton : isAdd ?
        <Button type="primary" icon={<DiffOutlined/>} color="default"> 新增字典值</Button>
        : <Button icon={<EditOutlined/>}> 编辑字典数据</Button>}
      modalProps={{destroyOnClose: true}}
    >
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="dictLabel"
            label="字典标签"
            placeholder="请输入字典标签"
            rules={[{required: true, message: '请输入字典标签'}]}
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name="dictValue"
            label="字典值"
            placeholder="请输入字典值"
            rules={[{required: true, message: '请输入字典值'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormDigit
            name="dictSort"
            label="字典排序"
            placeholder="请输入字典排序"
            min={0}
            max={999}
            rules={[{required: true, message: '请输入输入排序'}]}
          />
        </Col>
        <Col span={12}>
          <ProFormRadio.Group
            name="isDefault"
            label="是否默认"
            initialValue={'1'}
            valueEnum={{
              '0': '是',
              '1': '否',
            }}
            rules={[{required: true, message: '请选择是否默认'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="cssClass"
            label="CSS 类"
            placeholder="请输入 CSS 类"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name="listClass"
            label="列表类"
            placeholder="请输入列表类"
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="color"
            label="渲染颜色"
            placeholder="请输入渲染颜色"
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default DictDataEdit;
